{$layout}

{$template "/datepicker"}

<div class="ui menu tabular tiny attached">
	<a href="" @click.prevent="selectTab('chart')" class="item" :class="{active:tab=='chart'}">图表</a>
	<a href="" @click.prevent="selectTab('data')" class="item" :class="{active:tab=='data'}">数据</a>
	<a href="" @click.prevent="selectTab('csv')" class="item" :class="{active:tab=='csv'}">导出</a>
</div>


<!-- 图表 -->
<div class="ui segment attached" style="padding-bottom:2em" v-show="tab == 'chart'">
	{$template "/chart_render"}
</div>

<!-- 数据 -->
<div class="ui segment attached data-box" v-show="tab == 'data'">
	<table class="ui table selectable">
		<thead>
			<tr>
				<th>时间</th>
				<th v-if="exportTitles.length == 0">数据</th>
				<th v-for="t in exportTitles">{{t}}</th>
			</tr>
		</thead>
		<tr v-for="v in exportArray">
			<td class="title">{{v.time}}</td>
			<td v-if="exportTitles.length == 0">{{v.value}}</td>
			<td v-for="t in exportTitles">{{getValue(v.value, t)}}</td>
		</tr>
	</table>
</div>

<!-- 导出 -->
<div class="ui segment attached export-box" v-show="tab == 'csv'">
	<a href="" @click.prevent="exportCSV()">点此导出为CSV文件，浏览器将会提示下载文件</a>
</div>

<form class="ui form" data-tea-action=".updateChart" id="update-chart-form" :class="{loading:isLoading}">
	<input type="hidden" name="agentId" :value="agentId"/>
	<input type="hidden" name="appId" :value="appId"/>
	<input type="hidden" name="itemId" :value="itemId"/>
	<input type="hidden" name="chartId" :value="chartId"/>
	<table class="ui table selectable definition">
		<tr>
			<td class="title">名称</td>
			<td>
				<input type="text" name="name" v-model="chart.name" @input="changeName()"/>
			</td>
		</tr>
		<tr>
			<td>时间筛选</td>
			<td>
				<select class="ui dropdown" name="timeType" style="width:10em" v-model="chart.timeType" @change="changeTimeType">
					<option value="default">默认</option>
					<option value="past">近期时间</option>
					<option value="range">日期范围</option>
				</select>
			</td>
		</tr>
		<tbody v-show="chart.timeType == 'past'">
			<tr>
				<td>近期时间</td>
				<td>
					<select class="ui dropdown" name="timePast" v-model="chart.timePast" @change="changeTimePast()" style="width:10em">
						<option v-for="timePast in timePasts" :value="timePast.value">{{timePast.name}}</option>
					</select>
				</td>
			</tr>
		</tbody>
		<tbody v-show="chart.timeType == 'range'">
			<tr>
				<td>开始日期</td>
				<td>
					<input type="text" name="dayFrom" value="" id="day-from-input" style="width:8em" autocomplete="off" v-model="chart.dayFrom"/>
				</td>
			</tr>
			<tr>
				<td>结束日期</td>
				<td>
					<input type="text" name="dayTo" value="" id="day-to-input" style="width:8em" autocomplete="off" v-model="chart.dayTo"/>
				</td>
			</tr>
		</tbody>
	</table>

	<a href="" @click.prevent="submit()" v-show="!successVisible">保存当前条件</a>
	<span class="green" v-if="successVisible">保存成功</span>
</form>